<template>
  <!--
		@copyright CYZ
		@time 2022/8/6
		创业专区-导航栏
	 -->
  <view class="main">
    <u-tabbar v-model="current" :list="list" :mid-button="true" activeColor='#FF721B' inactiveColor='#AAAAAA'
      :before-switch="beforeSwitch"></u-tabbar>
  </view>
</template>

<script>
  import imgs from '@/common/img.js';
  export default {
    props: {
      //激活选项的索引
      current: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        list: [{
            iconPath: '/static/tab-icon1.png',
            selectedIconPath: '/static/tab-active-icon1.png',
            text: '首页',
            url: '/pages/index/lidaPage', //url 非官方配置，仅记录地址,
          },
          {
            iconPath: '/static/tab-icon2.png',
            selectedIconPath: '/static/tab-active-icon2.png',
            text: '新闻',
            url: '/pages/index/news'
          },
		  {
		    iconPath: '/static/tab-icon3.png',
		    selectedIconPath: '/static/tab-active-icon3.png',
		    text: '本地生活',
		    url: '/pages/nearbyShop/city'
		  },
          // {
          //   iconPath: '/static/tab-icon3.png',
          //   selectedIconPath: '/static/tab-icon3.png',
          //   text: '本地生活',
          //   midButton: true,
          //   url: '/pages/nearbyShop/city'
          // },
          {
            iconPath: '/static/tab-icon4.png',
            selectedIconPath: '/static/tab-active-icon4.png',
            text: '订单',
            url: '/pages/order/index'
          },
          {
            url: "/pages/index/personal",
            iconPath: '/static/tab-icon5.png',
            selectedIconPath: '/static/tab-active-icon5.png',
            text: "我的"
          }
        ]
      }
    },
    methods: {
      beforeSwitch(index) {
        let isOtherPage = index != this.current;
        // console.log(isOtherPage, index, 111)
        if (isOtherPage) {
          uni.redirectTo({
            url: this.list[index].url
          })
        }
        return false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    ::v-deep .u-tabbar {
      .u-tabbar__content__item {

        .u-tabbar__content__item__button {
          .u-icon__img {
            * {
              background-size: 100% 100% !important;
            }
          }
        }
		
        .u-tabbar__content__item__text {
          bottom: 6rpx;
		  font-size: 24rpx;
        }
      }
    }
  }
  ::v-deep .u-tabbar__content__circle__border {
    display: none !important;
  }
</style>
